{include file="$header" /}
<el-container :class="{'collapse': isCollapse}">
	<el-aside class="mk-aside" width="220px">
        <a href="{$domain}" target="_blank"><div class="mk-aside-logo-warp"><div></div></div></a>
        <div class="mk-aside-welcome wow-bg-rtol">
            <div>欢迎您，{$userInfo['nickname']}</div>
            <div><a class="copyright-font" href="{$api}" target="_blank">OneKeyAdmin&nbsp;一键式管理系统</a></div>
        </div>
        <el-menu
            class="mk-aside-menu"
            :unique-opened="true"
            :default-active="path"
            :collapse="isCollapse"
            background-color="#474747"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="clickMenu">
            <template v-for="(item, index) in menuTree" :key="index">
                <template v-if="item.children">
                    <el-submenu :index="item.path" :key="item.path">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{item.title}}</span>
                            <el-badge v-if="item.unread !== 0" :value="item.unread" :max="99"/>
                        </template>
                        <template v-for="(subItem,subIndex) in item.children" :key="subIndex">
                            <el-submenu
                                v-if="subItem.children"
                                :index="subItem.path"
                                :key="subItem.path">
                                <template slot="title">
	                                {{subItem.title}}
	                                <el-badge v-if="subItem.unread !== 0" :value="subItem.unread" :max="99"/>
	                            </template>
                                <el-menu-item
                                    v-for="(threeItem,i) in subItem.children"
                                    :key="i"
                                    :index="threeItem.path">
                                    {{threeItem.title}}
                                    <el-badge v-if="threeItem.unread !== 0" :value="threeItem.unread" :max="99"/>
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item
                                v-else
                                :index="subItem.path"
                                :key="subItem.path">
                                {{subItem.title}}
                                <el-badge v-if="subItem.unread !== 0" :value="subItem.unread" :max="99"/>
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.path" :key="item.path">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                        <el-badge v-if="item.unread !== 0" :value="item.unread" :max="99"/>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
        <div class="mk-aside-copyright">
        	<span>V&nbsp;{{version}}</span>
        	<div><a class="copyright-font" href="{$api}" target="_blank">由&nbsp;万旗网&nbsp;提供技术支持</a></div>
        </div>
    </el-aside>
	<el-container>
		<el-header class="mk-header">
			<div class="mk-notice">
		        <i class="mk-notice-ico"></i>
		        <ul :class="{'mk-notice-top':animate}">
		            <li v-for="(item,index) in horn" :key="index">{{item}}</li>
		        </ul>
		    </div>
	        <ul class="mk-nav">
				<li class="mk-nav-item">
					<el-dropdown 
				        @command="clickInfo"
				        @visible-change="show = userShow ? false :true"
				        :class="{'flag-show': userShow}">
				        <div class="mk-userinfo">
				            <span class="el-dropdown-link">
				                <el-image class="mk-userinfo-cover" :src="domain + userCover">
				                    <div slot="error" class="image-slot">
				                        <img class="error-image" :src="static + '/images/error.png'"/>
				                    </div>
				                </el-image>
				                <span class="nav-txt-label"><span class="mk-icon-down el-icon-arrow-down"></span></span>
				            </span>
				        </div>
				        <el-dropdown-menu slot="dropdown">
				            <el-dropdown-item
				            v-for="(item, index) in userList"
				            :key="index"
				            :command="item">
				                <el-dropdown-item class="mk-userinfo-list-icon" :icon="item.icon">{{item.title}}</el-dropdown-item>
				            </el-dropdown-item>
				        </el-dropdown-menu>
				        <el-dialog
				            top="16px"
				            :title="loadingCheck ? '更新检测中...' : '更新检测完毕'"
				            :visible.sync="dialogCheck"
				            width="800px">
				            <h4>当前版本：{{version}}</h4><br/>
				            <div v-loading="loadingCheck">
				                <div v-if="versionList.length > 0">
				                    <el-timeline v-for="(item, index) in versionList">
				                        <el-timeline-item :timestamp="item.version" placement="top">
				                        <el-card>
				                            <div v-html="item.content"></div>
				                            <p>版本提交于 {{item.create_time}}</p>
				                        </el-card>
				                    </el-timeline-item>
				                </div>
				                <div v-else>
				                    已经是最新版本啦~
				                </div>
				            </div>
				            <span slot="footer" class="dialog-footer">
				                <el-button size="small" @click="dialogCheck = false">关 闭</el-button>
				                <el-button  
				                    v-if="versionList.length > 0"
				                    size="small" 
				                    type="primary" 
				                    @click="systemUpdate()"
				                    :disabled="loadingUpdate">
				                    {{loadingUpdate ? '更新中...' : '开始更新'}}
				                </el-button>
				            </span>
				        </el-dialog>
				    </el-dropdown>
	            </li>
	            <li class="mk-nav-item">
	            	<el-dropdown
				        @command="clickLang"
				        @visible-change="langShow = langShow ? false :true"
				        :class="{'flag-show': langShow}">
				        <div class="mk-language">
				            <span class="el-dropdown-link">
				                <el-image class="mk-flag-icon" :src="domain + languageCover" style="float:left">
				                    <div slot="error" class="image-slot">
				                        <img class="error-image" :src="static + '/images/error.png'"/>
				                    </div>
				                </el-image>
				                <span class="nav-txt-label"><span class="mk-icon-down el-icon-arrow-down"></span></span>
				            </span>
				        </div>
				        <el-dropdown-menu slot="dropdown">
				            <el-dropdown-item
					            v-for="(item, index) in langAllow"
					            :key="index"
					            :command="item">
				                <div class="mk-flag-warp">
				                    <el-image class="mk-flag-icon" :src="domain + item.cover">
				                        <div slot="error" class="image-slot">
				                            <img class="error-image" :src="static + '/images/error.png'"/>
				                        </div>
				                    </el-image>
				                    {{lang(item.name)}}
				                </div>
				            </el-dropdown-item>
				        </el-dropdown-menu>
				    </el-dropdown>
	            </li>
	        </ul>
	    </el-header>
	    <div class="mk-navigation">
	        <span
	            class="mk-btn-full-screen"
	            :title="isCollapse ? '伸展' : '全屏'"
	            @click="isCollapse = !isCollapse">
	            <i></i>
	        </span>
	        <el-tabs
	            class="mk-header-tabs"
	            v-model="path"
	            type="card"
	            closable
	            @tab-remove="removeTab">
	            <el-tab-pane
	                v-for="(item, index) in tabs"
	                :key="item.path"
	                :name="item.path"
	                :label="item.title">
	            </el-tab-pane>
	        </el-tabs>
	        <el-main>
				<iframe class="mk-iframe" :src="admin_url(path)"></iframe>
			</el-main>
	    </div>
	</el-container>
</el-container>
{include file="$component" /}
<script> 
	var parentVm = new Vue({
		el: '#app',
		data () {
	        return {
	            path: "",
	            tabs: [],
	            language: language,
	            langAllow: langAllow,
	            userCover: userInfo.cover,
	            isCollapse: false,
	            storageTime: 240*60*60*1000,
	            menu: {:json_encode($menus)},
	            horn: {:json_encode($notification)},
	            langShow: false,
	            userShow: false,
	            userList: [
	                {title: "个人主页", type: "path", icon: "el-icon-house", value: "adminUser/personal"},
	                {title: "清除缓存", type: "func", icon: "el-icon-delete", value: "cache"},
	                {title: "检测更新", type: "func", icon: "el-icon-warning-outline", value: "update"},
	                {title: "访问网站", type: "target", icon: "el-icon-tickets", value: domain},
	                {title: "立即退出", type: "href", icon: "el-icon-switch-button", value: "login/logout"},
	            ],
	            versionList: [],
	            dialogCheck: false,
	            loadingCheck: false,
	            loadingUpdate: false,
	            animate: false,
	            loadingTitle: '开始更新',
	            version: version,
	            cacheClearUrl: 'index/cacheClear',
	            checkUpdateUrl: 'index/checkUpdate',
	            updateUrl: 'index/update',
	        }
	    },
	    computed: {
	    	menuTree() {
	    		return tree.convert(this.menu);
	    	},
	        languageCover: function () {
	            let index = common.arrayIndex(this.langAllow, this.language, 'name');
	            return index === -1 ? "" : this.langAllow[index]['cover'];
	        },
	    },
	    created() {
	    	this.init();
	    	setInterval(this.showMarquee, 4000);
	    },
	    methods: {
	    	/**
	    	 * 初始化
	    	 */
	    	init() {
	    		// 控制台选项
	    		let consoleIndex = common.arrayIndex(this.menu, 'console/index', 'path');
	    		if (consoleIndex !== -1) {
	    			this.tabs.push(this.menu[consoleIndex]);
	    		}
	    		// 当前路由选项
		        let route = window.location.hash === "" ? '#console/index' : window.location.hash;
		        this.path = route.replace('#', '');
		        if (this.path !== 'console/index') {
			        let pathIndex = common.arrayIndex(this.menu, this.path, 'path');
			        if (pathIndex !== -1) {
			        	this.tabs.push(this.menu[pathIndex])
			        }
		        }
		        // 放大缩小
		        let collapseCache = storage.get("adminCollapse");
		        this.isCollapse = collapseCache === null ? false : collapseCache;
	    	},

	        /**
	         * 点击菜单
	         * @param  {Object} path 路径
	         */
	        clickMenu(path) {
	            if (path !== this.path) {
	                let pathIndex = common.arrayIndex(this.menu, path, 'path');
	                let tabsIndex = common.arrayIndex(this.tabs, path, 'path');
	                this.path = path;
	                if (tabsIndex === -1) this.tabs.push(this.menu[pathIndex]);
	            }
	        },

	        /**
	         * 删除导航项
	         * @param  {String} targetName 导航项
	         */
	        removeTab(targetName) {
	            let index = common.arrayIndex(this.tabs, targetName, 'path');
	            this.tabs.splice(index, 1);
	            if (targetName === this.path) this.path = this.tabs[index-1]['path'];
	        },
	        /**
	         * 选择项
	         * @param  {Object} item
	         */
	        clickInfo(item) {
	            var self = this;
	            if (typeof item !== 'undefined') {
	                switch (item.type) {
	                    case 'path':
	                        self.clickMenu(item.value);
	                        break;
	                    case 'href':
	                        location.href = admin_url(item.value);
	                        break;
	                    case 'target': 
	                        window.open(item.value);
	                        break;
	                    case 'func':
	                        switch (item.value) {
	                            case 'update':
	                                self.dialogCheck = true;
	                                self.loadingCheck = true;
	                                request.post(self.checkUpdateUrl,{},function(res){
	                                    if (res.status === 'success') {
	                                        self.versionList = res.data;
	                                    } else {
	                                        self.$message({ showClose: true, message: res.message, type: res.status });
	                                    }
	                                    self.loadingCheck = false;
	                                })
	                                break;
	                            case 'cache':
	                                request.post(self.cacheClearUrl,{},function(res){
	                                    self.$message({ showClose: true, message: res.message, type: res.status });
	                                })
	                                break;
	                        }
	                        break;
	                }
	            }
	        },
	        /**
	         * 系统更新
	         */
	        systemUpdate() {
	            let self = this;
	            let num  = Number(self.version.replace(/\./g,"")) + 1;
	            let arr  = num.toString().split('');
	            let now  = arr.join('.');
	            let newVersion = self.versionList[0]['version'];
	            self.loadingTitle  = '开始安装：' + now;
	            self.loadingUpdate = true;
	            request.post(self.updateUrl,{version: num},function(res){
	                self.$message({ showClose: true, message: res.message, type: res.status });
	                if (res.status === 'success') {
	                    self.version = res.version;
	                    if (res.version == newVersion) {
	                        self.loadingTitle = '更新完成';
	                        setTimeout(function () {
	                            location.reload();
	                        }, 1000);
	                    } else {
	                        self.loadingTitle = '更新至：' + res.version;
	                        self.systemUpdate();
	                    }
	                }
	            })
	        },
	        /**
	         * 选择语言
	         * @param  {Object} item 语言项
	         */
	        clickLang(item) {
	            locationUrl.set('lang', item.name);
	        },
	        /**
			 * 文字通告
			 */
	        showMarquee() {
	            if (this.horn.length > 1) {
	                this.animate = true;
	                setTimeout(() => {
	                    this.horn.push(this.horn[0]);
	                    this.horn.shift();
	                    this.animate = false;
	                }, 1000);
	            } else {
	                this.animate = false;
	            }
	        }
	    },
	    watch: {
	    	isCollapse(v) {
	    		storage.set("adminCollapse", v, this.storageTime);
	    	},
	    	path(v) {
	    		window.location.hash = v;
	    	},
	    }
	})
</script>
{include file="$footer" /}